<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 300px;
      padding: 10px;
    }
    .button-group {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    button {
      padding: 8px;
      cursor: pointer;
    }
    #status {
      margin-top: 10px;
      color: #666;
    }
    .image-list {
      max-height: 400px;
      overflow-y: auto;
      margin-top: 10px;
    }
    .image-list img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      margin: 5px;
    }
    .pagination {
      margin-top: 10px;
      text-align: center;
    }
    .status-info {
      margin: 10px 0;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .status-info p {
      margin: 5px 0;
      font-size: 14px;
      color: #666;
    }
    #exportExcel {
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
    }
    #exportExcel:hover {
      background-color: #45a049;
    }
    .download-status {
      margin-top: 10px;
      padding: 5px;
      background-color: #e8f5e9;
      border-radius: 4px;
      text-align: center;
      font-size: 14px;
      color: #2e7d32;
    }
    .control-panel {
      margin: 10px 0;
      padding: 10px;
      background: #f5f5f5;
      border-radius: 4px;
    }
    .control-panel label {
      display: block;
      margin: 5px 0;
      font-size: 14px;
    }
    .control-panel input {
      width: 80px;
      padding: 4px;
      margin-left: 10px;
    }
    .dialog {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }
    .dialog-content {
      background: white;
      padding: 20px;
      border-radius: 8px;
      min-width: 300px;
    }
    .template-list {
      max-height: 300px;
      overflow-y: auto;
      margin: 10px 0;
    }
    .template-item {
      border: 1px solid #ddd;
      padding: 10px;
      margin: 5px 0;
      border-radius: 4px;
    }
    .template-form label {
      display: block;
      margin: 10px 0;
    }
    .template-form input {
      width: 100%;
      padding: 4px;
      margin-top: 4px;
    }
    .template-actions {
      margin-top: 5px;
    }
    .template-actions button {
      margin-right: 5px;
      padding: 2px 8px;
    }
    .template-status {
      margin-bottom: 10px;
      padding: 10px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    .template-status .warning {
      color: #f44336;
      font-weight: bold;
      margin-top: 5px;
    }
    .template-status div {
      margin: 5px 0;
    }
  </style>
</head>
<body>
  <div class="control-panel">
    <div id="templateStatus" class="template-status"></div>
    <label>
      目标图片数量：
      <input type="number" id="targetImages" value="5000" min="1">
    </label>
    <label>
      目标页数：
      <input type="number" id="targetPages" value="50" min="1">
    </label>
  </div>
  <div class="button-group">
    <button id="startCrawl">开始爬取</button>
    <button id="stopCrawl">结束爬取</button>
    <button id="viewImages">图片浏览</button>
    <button id="downloadImages">图片下载</button>
    <button id="crawlAndDownload">爬取并下载</button>
    <button id="exportExcel">导出Excel</button>
    <button id="resetAll" style="background-color: #f44336; color: white;">重置数据</button>
    <button id="manageTemplates">管理模板</button>
  </div>
  <div class="status-info">
    <p id="articleStatus">已爬取网页：0 个</p>
    <p id="imageStatus">已爬取图片：0 张</p>
    <p id="currentPage">当前页码：0</p>
  </div>


  <div class="image-list" id="imageList" style="display: none;"></div>
  <div class="pagination" id="pagination"></div>
  <script src="lib/xlsx.full.min.js"></script>
  <script src="excel-export.js"></script>
  <script src="popup.js"></script>
  <!-- 模板管理对话框 -->
  <div id="templateDialog" class="dialog" style="display: none;">
    <div class="dialog-content">
      <h3>模板管理</h3>
      <div class="template-list" id="templateList"></div>
      <button id="addTemplate">添加新模板</button>
      <button id="saveTemplates">保存更改</button>
      <button id="closeDialog">关闭</button>
    </div>
  </div>
  <!-- 添加/编辑模板对话框 -->
  <div id="editTemplateDialog" class="dialog" style="display: none;">
    <div class="dialog-content">
      <h3>编辑模板</h3>
      <div class="template-form">
        <label>域名：<input type="text" id="templateDomain"></label>
        <label>页面URL模板：<input type="text" id="templatePageUrl"></label>
        <label>列表选择器：<input type="text" id="templateListSelector"></label>
        <label>图片选择器：<input type="text" id="templateImageSelector"></label>
      </div>
      <button id="saveTemplate">保存</button>
      <button id="cancelTemplate">取消</button>
    </div>
  </div>
</body>
</html> 